Padding iphone x #1007
Padding iphone x #1007
Conversation
update main branch
ronderksen
requested review from
dannify,
devongovett and
snowystinger
as code owners
| @@ -66,6 +66,10 @@ | |||
| transition: opacity var(--spectrum-dialog-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) var(--spectrum-dialog-exit-animation-delay), | |||
| transform var(--spectrum-dialog-exit-animation-duration) cubic-bezier(0.5, 0, 1, 1) var(--spectrum-dialog-exit-animation-delay); | |||
|
|
|||
| &:last-child { | |||
| padding-bottom: calc(env(safe-area-inset-bottom) + 8px); | |||
There was a problem hiding this comment.
while a really neat function that i just learned about (thank you!)
it seems it relies on a specific meta tag? https://developer.mozilla.org/en-US/docs/Web/CSS/env
To tell the browser to use the whole available space on the screen, and so enabling us to use the env() variables, we need to add a new viewport meta value:
is this not the case?
There was a problem hiding this comment.
hmm well we don't have viewport-fit=cover in the docs site, just width=device-width, initial-scale=1 and we still have this issue...
There was a problem hiding this comment.
You don't need the meta tag part. I've checked and I definitely see a difference in padding with and without the env() part. But I will triple check to be sure.
Also, tray is always the last child of the tray wrapper element, so always adding the padding is fine.
|
Thanks @ronderksen! I've removed the extra 8px of padding in addition to the safe area inset because that would affect non-iPhones and also when the Safari toolbar is visible. Also, the tray is always the last child of the tray wrapper element, so always adding the padding is fine. I assume the extra 8px was to try to avoid tapping near the bottom showing the toolbar and hiding the tray due to scrolling. I'm going to open a separate PR to prevent that. |
Closes #782
✅ Pull Request Checklist:
📝 Test Instructions:
Open the picker examples on an iPhone X or newer (without a physical home button) in portrait mode and try to tap the last item.
The solution still isn't perfect, but it seems to at least clear the home bar at the bottom of the screen
🧢 Your Project:
None